<template>
  <div class="main">
    <el-card class="box-card">
      <div class="header"></div>
      <div class="content">
        <div class="content-add">
          <el-form>
            <el-form-item label="新增地点">
              <el-input type="text" v-model="placeName" autocomplete="off" style="width: 150px"></el-input>
              <el-button type="primary" @click="newPlace" style="margin-left: 20px">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="content-table">
          <el-table :data="tableData" border>
            <el-table-column label="ID" prop="id" sortable></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="操作" width="78px">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="removePlace(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {addPlace, allPlaces, deletePlace} from "@/http/api/place";
import response from "@/http/response";

export default {
  name: "MapData",
  data() {
    return {
      placeName: '', // 新增地点名称
      tableData: [],
    }
  },
  methods: {

    // 新增地点
    async newPlace() {

      // 判断是否有值
      if (this.placeName === '') {
        return this.$message.warning('地点名称不能为空')
      }

      // 请求新增地点
      let result = await addPlace({
        name: this.placeName
      })

      // 获取请求结果
      switch (result.code) {

        case response.success: // 请求成功
          this.$message.success('新增成功')

          // 刷新列表
          await this.getPlaceList()
          break

        case response.serverErr: // 服务器异常
          this.$message.error(result.message)
          break

        default: // 普通异常
          this.$message.warning(result.message)
      }
    },

    // 获取金券列表
    async getPlaceList() {

      // 请求所有的地点信息
      let result = await allPlaces()

      // 请求成功
      if (result.code === 0) {
        this.tableData = result.data
      }
    },

    // 移除某个地点
    async removePlace(index) {

      // 发出删除请求
      let result = await deletePlace({
        placeId: this.tableData[index].id
      })

      // 获取请求结果
      switch (result.code) {

        case response.success: // 请求成功
          this.$message.success('删除成功')

          // 刷新列表
          await this.getPlaceList()
          break

        case response.serverErr: // 服务器异常
          this.$message.error(result.message)
          break

        default: // 普通异常
          this.$message.warning(result.message)
      }

    },
  },
  mounted() {

    // 加载地点列表
    this.getPlaceList()
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;

  .box-card {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 0 100px;

    .header {
    }

    .content {
      width: 70%;
      margin: 0 auto;

      .content-add {
        margin-bottom: 30px;
      }
    }
  }
}
</style>